@import "styles/_variables";
@import "styles/mixins";

.text-area {
  &-wrapper {
    display: flex;
    flex-flow: column;

    & > * + * {
      margin-top: 7px;
    }
  }

  box-sizing: border-box;
  min-width: 200px;
  padding: 6px 12px;
  font-family: $font-family-code;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-input);
  resize: none;
  background-color: var(--background-card);
  border: 1px solid var(--border-active);
  border-radius: 4px;

  @include sm-down {
    width: 100% !important;
  }

  &::placeholder {
    font-family: $font-family-primary;
    font-size: 13px;
    line-height: 22px;
    color: var(--color-placeholder);
    letter-spacing: -0.00928571px;
  }

  &:focus {
    border-color: var(--border-focus);
    outline: none;
  }
}
